<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>外边距</title>
		<!-- 内部样式-->
		<style>
			*{   /*  通配符:初始化所有的内边距和外边距 */
				margin:0;
				padding:0;
			}
			.box{    /* 类选择器 */
				width:200px;
				height:300px;
				background-color: green;
				margin-bottom: 120px;
				/* margin: 50px auto; */
				
				
				
			}
			.bigbox{
				width:600px;
				height: 600px;
				background-color: deepskyblue;
				margin-top:100px;
				/* border:1px solid black;*/
				/*padding-top:500px;*/
				overflow:hidden;   /*hidden隐藏*/
			
			}
			.sbox{
				width:300px;
				height: 300px;
				background-color:plum;
				margin-top:100px;
			}
		</style>
		<!-- 外边距： margin
		 1.概念：盒子与盒子之间的距离
		 2.应用：
		  2.1 可以让块级盒子水平居中，前提条件是盒子有宽度，再给左右外边距设置为auto(自动的)
		  2.2 初始化所有的内边距
		3.相邻块级盒子垂直外边距合并,一般在开发中只给其中一个盒子写外边距。
		4.嵌套块级盒子外边距塌陷问题 >解决方式：
		  方式1：给父盒子添加边框
		  方式2：给父盒子添加边框
		  方式3：给父盒子添加overflow:hidden;[开发中常用]
		  
		 -->
	</head>
	<body>
		<div class="box">hello box</div>
		<div class="box2"></div>
		<div class="bigbox">
			<div class="sbox"></div>
		</div>
	</body>
</html>
